<template>
	<view>
		<view class="user_list animated fadeInLeft">
			<view class="head_pic"><image mode="widthFix" :src="item.userpic"></image></view>
			<view class="message">
				<view class="liaotian">
					<view class="title_name">{{ item.username }}</view>
					<view class="content">{{ item.data }}</view>
				</view>
				<view class="right_messNum">
					<view class="time">{{ item.time }}</view>
					<view class="num"><uni-badge class="uni-badge-left-margin" :text="item.noreadnum" type="error" /></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props:['item'],  
	data() {
		return {};
	},
	methods: {
	}
};
</script>

<style lang="less" scoped>
.user_list {
	display: flex;
	margin: 30rpx;
	border-bottom: 2rpx solid #ccc;

	.head_pic {
		flex: 1;
		padding-right: 15rpx;
		image {
			width: 80%;
			border-radius: 50%;
		}
	}
	.message {
		flex: 4;
		display: flex;
		justify-content: space-between;
		.liaotian {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			.content {
				color: #d3d3d3;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				width: 450rpx;
			}
		}
		.right_messNum {
			padding-left: 15rpx;
			display: flex;
			flex-direction: column;
			.time {
				color: #d8d8d8;
			}
			.num {
				margin-top: 15rpx;
			}
		}
	}
}
</style>
